<template>
	<view>
		<view class="header_box" :style="{height:height+'px'}">
			<view class="header_label" :style="'padding-top:'+statusBarHeight">
				<view class="logo">
					<view class="back" @click="getBackTap()">
						<aicon :type="pagesLength>1?'arrow-left-s-line':'home-wifi-fill'" size="22" :color="color">
						</aicon>
					</view>
					<view class="store" :style="{'border':`2rpx solid ${themeColor}`}">
						<view class="title" :style="{'backgroundColor':themeColor}" @click="getPath()">{{store}}
							<view class="iconfont icon-bianzu" style="color: aliceblue;font-size: 34rpx;margin-left: 10rpx;"
							>
						</view>
						</view>
						<view class="input" @click="getsearch()">
							<u-icon name="search" size="24" color="#bbb"></u-icon>
							<span>搜索</span>
							<!-- <u-search placeholder="日照香炉生紫烟"></u-search> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view v-if="position!='sticky'" :style="{height:height+'px'}"></view> -->
	</view>
</template>

<script>
	const app = getApp();
	export default {
		props: {
			logo: {
				type: String
			},
			back: {
				type: Boolean,
				default: false
			},
			store: {
				type: String
			},
			title: {
				type: String
			},
			color: {
				type: String,
				default: '#ffffff'
			},
			position: {
				type: String,
				default: 'relative'
			},
			themeColor: {
				type: String
			}
		},
		data() {
			return {
				statusBarHeight: null,
				pagesLength: getCurrentPages().length,
				templateConfig: uni.getStorageSync('templateConfig'),
			};
		},
		computed: {
			//  paddingTop(){
			// padding-top:'+statusBarHeight  
			//  },
			height() {
				const {
					platform,
					statusBarHeight,
					windowHeight
				} = uni.getSystemInfoSync()
				let height = statusBarHeight + 4 //ios 24px
				if (platform.toLowerCase() == "android") {
					height += 4 //android 28px
				}
				this.statusBarHeight = (height - 4) + 'px';
				console.log(this.statusBarHeight, '1111')
				let hei = height + 44;
				this.$emit('height', hei);
				// 胶囊高度 32px 下边框6px(+6px) height 状态栏高度
				return hei
			},

		},
		methods: {
			getBackTap() {
				if (this.pagesLength > 1) {
					return uni.navigateBack();
				} else {
					return uni.switchTab({
						url: '/pages/index/company'
					});
				}
			},
			getPathTap(path) {
				app.globalData.getPathTap(path);
			},
			getPath() {
				uni.navigateTo({
					url: '/pages/index/company'
				})
			},
			getsearch() {
				uni.navigateTo({
					url: '/pages/index/search'
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	.header_box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		z-index: 100;

		// position: sticky;
		// top: 0;
		// left: 0;
		// width: 100%;
		// z-index: 100;
		// background-color: #fff;
		.header_label {
			display: flex;
			align-items: center;
			height: 60rpx;
			justify-content: flex-start;

			// padding-top: 88rpx;
			.logo {
				display: flex;
				align-items: center;
				width: 100%;
				margin: 0 auto;

				image {
					width: 250rpx;
					height: 60rpx;
				}

				.back {
					// width: 100rpx;
					height: 70rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					aicon {
						width: 44rpx;
						height: 44rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

				.name {
					color: #1c1c1c;
					font-size: 30rpx;
					font-weight: bold;
				}

				.hover {
					width: 30rpx;
				}
			}

			.store {
				display: flex;
				align-items: center;
				border: 1px solid #F54319;
				height: 60rpx;
				border-radius: 100rpx;
				overflow: hidden;
				margin-left: -20rpx;

				.title {
					height: 100%;
					background-color: #F54319;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 26rpx;
					max-width: 500rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					padding: 0 20rpx 0 30rpx;
					font-weight: bold;
				}

				.input {
					width: 150rpx;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;

					aicon {
						width: 32rpx;
						height: 32rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					span {
						color: #bbb;
						font-size: 26rpx;
						padding-left: 10rpx;
					}
				}
			}
		}
	}
</style>